<template>
  <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="myVideoList">
    <template #footer>
      <div>
        <b>HeavenBoy Design</b>
        footer part
      </div>
    </template>
    <template #renderItem="{ item }">
      <a-list-item key="item.title">
        <template #actions>
                  <span :key="PlayCircleOutlined">
                    <a-tooltip placement="top">
                      <template #title>
                        <span>播放量</span>
                      </template>
                      <!--播放量-->
                      <component :is="PlayCircleOutlined" style="margin-right: 8px" />
                      {{ item.playCount }}
                    </a-tooltip>
                  </span>
          <span :key="StarOutlined">
                    <a-tooltip placement="top">
                      <template #title>
                        <span>收藏量</span>
                      </template>
                      <!--收藏量-->
                      <component :is="StarOutlined" style="margin-right: 8px" />
                      {{ item.collectCount }}
                    </a-tooltip>
                  </span>
          <span :key="LikeOutlined">
                    <a-tooltip placement="top">
                      <template #title>
                        <span>点赞量</span>
                      </template>
                      <!--点赞量-->
                      <component :is="LikeOutlined" style="margin-right: 8px" />
                      {{ item.likeCount }}
                    </a-tooltip>
                  </span>
          <span :key="MessageOutlined">
                    <a-tooltip placement="top">
                      <template #title>
                        <span>评论量</span>
                      </template>
                      <!--评论量-->
                      <component :is="MessageOutlined" style="margin-right: 8px" />
                      {{ item.commentCount }}
                    </a-tooltip>
                  </span>
          <span>
                    <a-tooltip placement="top">
                      <template #title>
                        <span>弹幕量</span>
                      </template>
                      <!--弹幕量-->
                    <icon>
                      <template #component>
                        <svg style="margin-right: 8px" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="bi bi-calendar4-range" viewBox="0 0 16 16">
                            <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5z"/>
                            <path d="M9 7.5a.5.5 0 0 1 .5-.5H15v2H9.5a.5.5 0 0 1-.5-.5v-1zm-2 3v1a.5.5 0 0 1-.5.5H1v-2h5.5a.5.5 0 0 1 .5.5z"/>
                        </svg>
                      </template>
                    </icon>
                    {{ item.danmuCount }}
                    </a-tooltip>
                  </span>
          <div style="margin-left: 20px">
            <a-space>
              <a-button block>编辑</a-button>
              <a-button danger>删除</a-button>
            </a-space>
          </div>
        </template>
        <template #extra>
          <img width="272" alt="logo" :src="item.coverPicture"/>
        </template>
        <a-list-item-meta :description="item.introduce">
          <template #title>
            <router-link :to="`/video/${item.videoId}`">
              {{ item.title }}
            </router-link>
          </template>
        </a-list-item-meta>
        {{ formatISODate(item.publishTime) }} 发布
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup>
import Icon, {LikeOutlined, MessageOutlined, PlayCircleOutlined, StarOutlined} from "@ant-design/icons-vue";
import {formatISODate} from "@/utils/timeUtil.js";
import {ref, onMounted} from "vue";
import {listOwnVideos} from "@/api/VideoRequest.js";
import {message} from "ant-design-vue";

const myVideoList = ref([]);
const pagination = {
  onChange: page => {
    console.log(page);
  },
  pageSize: 3,
};

onMounted(_ => {
  listOwnVideos().then(res=>{
    console.log('投稿的视频',res)
    if(res.code === 0) {
      myVideoList.value = res.data;
    } else {
      message.error(res.msg);
    }
  });
})

</script>

<style scoped>

</style>